<template>
    <div class="md5-page" :class="{ 'dark-mode': isDark }">
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <div class="input-box">
                <el-input
                        v-model="inputText"
                        placeholder="请输入要加密的内容"
                        type="textarea"
                        :autosize="{ minRows: 4 }"
                        clearable
                        @input="onInputChange()"
                        class="input"
                />
            </div>

            <div class="table-box" ref="tableRef">
                <el-table
                        :data="tableData"
                        border
                        size="small"
                        :resizable="false"
                        style="width: 100%;"
                        class="table"
                >
                    <el-table-column prop="label" label="类型" min-width="120"/>
                    <el-table-column prop="value" label="结果" min-width="200"/>
                    <el-table-column label="操作" min-width="80">
                        <template #default="scope">
                            <el-tooltip
                                    v-if="tooltipIndex === scope.$index"
                                    effect="dark"
                                    content="复制成功"
                                    placement="top"
                            >
                                <el-button
                                        link
                                        @click="copyToClipboard(scope.row.value, scope.$index)"
                                        class="copy-btn"
                                        aria-label="复制"
                                >
                                    <el-icon style="font-size: 1.2rem;">
                                        <DocumentCopy/>
                                    </el-icon>
                                </el-button>
                            </el-tooltip>
                            <el-button
                                    v-else
                                    link
                                    @click="copyToClipboard(scope.row.value, scope.$index)"
                                    class="copy-btn"
                                    aria-label="复制"
                            >
                                <el-icon style="font-size: 1.2rem;">
                                    <DocumentCopy/>
                                </el-icon>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, computed, onMounted, onBeforeUnmount} from "vue";
import {post, get} from "@/net/index.js";
import {ElMessage} from "element-plus";
import ToolHeader from "@/components/ToolHeader.vue";
import {useDark} from "@vueuse/core";
import {DocumentCopy} from "@element-plus/icons-vue";

const inputText = ref("");
const md5Result = ref({
    lower32: "",
    upper32: "",
    lower16: "",
    upper16: "",
});

const title = ref("");
const subtitle = ref("");
const tableRef = ref(null);
const isDark = useDark();

const tooltipIndex = ref(-1);

const tableData = computed(() => [
    {label: "32位小写", value: md5Result.value.lower32 || ""},
    {label: "32位大写", value: md5Result.value.upper32 || ""},
    {label: "16位小写", value: md5Result.value.lower16 || ""},
    {label: "16位大写", value: md5Result.value.upper16 || ""},
]);

let debounceTimer = null;

function onInputChange() {
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        if (!inputText.value.trim()) {
            md5Result.value = {
                lower32: "",
                upper32: "",
                lower16: "",
                upper16: "",
            };
            return;
        }
        post(
            "/api/codeTool/md5-hash",
            {text: inputText.value},
            (data) => {
                md5Result.value.lower32 = data.lower32 || "";
                md5Result.value.upper32 = data.upper32 || "";
                md5Result.value.lower16 = data.lower16 || "";
                md5Result.value.upper16 = data.upper16 || "";
            },
            (msg) => {
                ElMessage.error("获取MD5加密失败：" + msg);
            }
        );
    }, 300);
}

function copyToClipboard(text, index) {
    navigator.clipboard
        .writeText(text)
        .then(() => {
            tooltipIndex.value = index;
            setTimeout(() => {
                tooltipIndex.value = -1;
            }, 1200);
        })
        .catch(() => {
            ElMessage.error("复制失败");
        });
}

function loadTitleAndSubtitle() {
    get(
        "/api/codeTool/getInfo?path=md5",
        (data) => {
            if (data) {
                title.value = data.title || title.value;
                subtitle.value = data.introduction || subtitle.value;
            }
        },
        (msg) => {
            ElMessage.error("获取工具信息失败：" + msg);
        }
    );
}

onMounted(() => {
    loadTitleAndSubtitle();
});

onBeforeUnmount(() => {
});
</script>

<style scoped>
.md5-page {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.25rem;
    box-sizing: border-box;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--text-color, #222);
    transition: background-color 0.3s, color 0.3s;
}

.content-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-box {
    width: 100%;
    background-color: var(--input-box-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 0.8rem 1rem;
    transition: background-color 0.3s;
    box-sizing: border-box;
}

.md5-page ::v-deep(.input textarea) {
    width: 100%;
    font-size: 1.25rem;
    min-height: 9rem;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--input-border, #ccc);
    border-radius: 0.4rem;
    padding: 1rem 1.25rem;
    color: var(--input-text, #222);
    background-color: var(--input-bg, #fff);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    overflow-x: hidden;
}

.md5-page ::v-deep(.input textarea)::placeholder {
    color: var(--placeholder-color, #999);
    font-size: 1.25rem;
}

.table-box {
    width: 100%;
    background-color: var(--table-box-bg, #f9f9f9);
    border-radius: 0.5rem;
    padding: 0.5rem;
    transition: background-color 0.3s;
    box-sizing: border-box;
    overflow-x: auto;
}

.md5-page ::v-deep(.el-table) {
    border-radius: 0.5rem;
    background-color: var(--table-bg, #fff);
    transition: background-color 0.3s;
    /* 不设置 table-layout，保持默认 */
}

.md5-page ::v-deep(.el-table__body td),
.md5-page ::v-deep(.el-table__header th) {
    font-size: 1.25rem;
    padding: 0.8rem 1.2rem;
    color: var(--table-text, #222);
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.md5-page ::v-deep(.el-table__header th:nth-child(1)),
.md5-page ::v-deep(.el-table__body td:nth-child(1)) {
    font-weight: 600;
    background-color: var(--table-first-col-bg, #eef3fc);
    color: var(--table-first-col-text, #333);
    transition: background-color 0.3s, color 0.3s;
}

.md5-page.dark-mode {
    --bg-color: #121212;
    --text-color: #ddd;

    --input-box-bg: #2b2b3b;
    --input-bg: #38384a;
    --input-text: #ddd;
    --input-border: #555;
    --placeholder-color: #888;

    --table-box-bg: #2f2f44;
    --table-bg: #2c2f44;
    --table-text: #ddd;
    --table-first-col-bg: #3b3f5c;
    --table-first-col-text: #fff;
}

.copy-btn {
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 响应式调整 */
@media (max-width: 900px) {
    .md5-page {
        font-size: 1rem;
    }

    .md5-page ::v-deep(.el-table__body td),
    .md5-page ::v-deep(.el-table__header th) {
        font-size: 1rem;
    }

    .table-box {
        padding: 0.3rem;
    }
}

@media (max-width: 600px) {
    .md5-page {
        font-size: 0.875rem;
    }

    .md5-page ::v-deep(.el-table__body td),
    .md5-page ::v-deep(.el-table__header th) {
        font-size: 0.875rem;
        padding: 0.4rem 0.6rem;
    }

    .copy-btn el-icon {
        font-size: 1rem;
    }
}
</style>